<template>
  <div class="welcome">
    <el-row>
      <el-col :span="8">
        <el-card
          :body-style="{ padding: '0px' }"
          class="user"
          shadow="hover"
        >
          <div
            slot="header"
            class="user-header"
          >
            <img
              :src="userInfo.icon"
              class="user-icon"
            >
            <div class="user-info">
              <p class="user-name">{{userInfo.userName}}</p>
              <p>{{userInfo.role === 1 ? '超级管理员': '游客'}}</p>
            </div>
          </div>
          <div style="padding: 14px;">

            <div class="bottom clearfix">
              <span> 上次登录时间：</span>
              <time class="time">{{ currentDate }}</time>
              <span class="button">登录地点: 长沙</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  data() {
    return {
      currentDate: new Date().getTime()
    }
  }
}
</script>
<style lang="scss">
.welcome {
  .user {
    .time {
      font-size: 13px;
      color: #999;
    }

    .bottom {
      margin-top: 13px;
      line-height: 12px;
    }

    .button {
      padding: 0;
      float: right;
    }
    .user-header {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .user-icon {
        width: 100px;
        height: 100px;
        display: block;
        border-radius: 50%;
      }
      .user-info {
        .user-name {
          margin-bottom: 12px;
        }
      }
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both;
    }
  }
}
</style>
